<template>
  <div id="login">
      <div class="login">
          <popup>
              <!-- 输入手机号 -->
            <div class="login_content" v-if="loginStatus!=1">
                <div class="title f24">
                     <span v-if="loginStatus==4 ||loginStatus==2">设置登录密码</span> 
                     <span v-else>登录</span> 
                </div>
                <div class="input" v-if="loginStatus==0 ||loginStatus==3">
                    <input type="number" v-model="username" placeholder="请输入手机号码"/>
                </div>
                <div class="input" v-if="loginStatus==4 ||loginStatus==2 || loginStatus==3">
                    <p class="password"><input type="password" v-model="password" placeholder="请输入密码"/></p>
                    <p @click="getCode(2)" v-show="loginStatus==3">忘记密码</p>
                </div>
                <div class="login_btn f20" @click="next">下一步</div>
            </div>

            <!-- 验证码 -->
            <div class="login_content" v-if="loginStatus==1">
                <div class="title f24">
                    <span>输入验证码</span>
                </div>
                <div class="dec">
                   <p> 验证码发送至<span>{{username}}</span></p>
                   <p class="count">{{count}}s后重发</p>
                </div>
                <div class="input code">
                    <input ref="code0" v-model="sms_code[0]" type="number" maxlength="1" @keyup="$refs.code1.focus()">
                    <input ref="code1" v-model="sms_code[1]" type="number" maxlength="1" @keyup="$refs.code2.focus()">
                    <input ref="code2" v-model="sms_code[2]" type="number" maxlength="1" @keyup="$refs.code3.focus()">
                    <input ref="code3" v-model="sms_code[3]" type="number" maxlength="1" @keyup="next">
                </div>
            </div>

          </popup>
      </div>

  </div>
</template>

<script>
    import popup from '@/components/common/popup'
    import {getCookie} from '@s/utils.js'
    import {curOrder,getCode,register,loginIn,forgetPwd} from '@/http'
    export default {
        name:'login',
        data(){
            return {
                loginStatus:0, //0:输入手机号，1：注册输入验证码，2:注册设置密码 ，3：登录输入密码 ,4:找回密码
                count:0,
                username:'',
                password:'',
                sms_code:[],
                sms_type:1

            }
        },
        components:{
            popup
        },
        directives: {
            focus:{
                  inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods:{
            next(){
                switch (this.loginStatus){
                    case 0 :
                        this.getCode(1);
                        break;
                    case 1 :
                        this.loginStatus=2;
                        break;
                    case 2 :
                        this.sms_type=='1'?this.register():this.forgetPwd();
                        break;
                    case 3 :
                        this.loginIn();
                        break;
                }
            },
            getCode(sms_type){  //获取验证码 判断是否注册过
                this.sms_type = sms_type;
                getCode({username:this.username,sms_type}).then((data)=>{
                    this.$tip({
                        message: data.code,
                        position: 'bottom',
                        duration: 1500
                    });
                    if(data.code == '10301'){  //已经注册过 切换到登录页面
                        this.loginStatus = 3

                    }else{ //新用户 输入验证码进行注册
                        this.loginStatus = 1
                        this.$refs.code0.focus()
                    }
                })
            },
            register(){

                let username = this.username;
                let password = this.password;
                let phone_code = this.sms_code.join('');
                register({username,password,phone_code}).then((data)=>{
                    // 注册成功,并直接自动登录
                    if(data.data.user_id){
                        this.loginIn()
                    }
                })
            },
            loginIn(){
                let username = this.username;
                let password = this.password;
                loginIn({username,password}).then((data)=>{
                    
                    if(data.data.user_id){
                        this.$store.dispatch('cookie',getCookie())

                        let _login_info = {
                            username:data.data.username,
                            password:this.password,
                            user_id:data.data.user_id
                        };
                        //数据保存到本地 + password
                        localStorage.login_info = JSON.stringify(_login_info);
                        this.$store.dispatch('login_info',_login_info);
                        this.$router.push('/')
                    }

                    
                })
            },
            //找回密码
            forgetPwd(){

                    let username = this.username;
                    let sms_code = this.sms_code.join('');
                    let password = this.password;
                    forgetPwd({username,password,sms_code}).then((data)=>{
                        if(data.code == 0){
                            this.loginStatus = 3
                        }
                    })
            }

        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';

    #login{
        width:100%;
        height:100%;

        input{
            text-align: center;
            height:100px;
        }

        .login_content{
            width:800px;
            padding-top:80px;
            >div{
                display: flex;
                align-items: center;
                flex-direction: column;
                padding:20px;
                // text-align: center;
            }
            p{
                padding:30px 0;
                color:$font_color_sub;
            }
            .password{
                border:{
                    top:1px solid $border-base;
                    bottom:1px solid $border-base;
                }
            }
            .code{
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: row;
                padding-bottom:50px;
                input{
                    width:20%;
                    height:150px;
                    border:1px solid $border-base;
                    text-align: center;
                }
                
            }
        }
        .title{
            
        }
        .dec{
            color:$font_color_sub;
        }
        .input{
           
        }
        .login_btn{
            margin-top:50px;
            background:#eaeaea;
        }
    }
</style>
